<template>
  <div>setup和ref的基本使用</div>
  <h3>{{count}}</h3>
  <button @click="updateCount">更新数据</button>
</template>

<script lang="ts">

import { defineComponent,ref } from 'vue';
export default defineComponent({
  name: 'App',
  // 需求，页面打开之后可以直接看到一个数据，点击按钮后，数据可以发生变化
  // vue2的方式实现的
  // data(){
  //   return{
  //     count:0,
  //   }
  // },
  // methods:{
  //   updateCount(){
  //     this.count++
  //   }
  // }
  // vue3的方式实现的
  setup(){
    // let count = 0 //此时的数据并不是响应式的数据(响应式数据，数据变，页面更着变)
    // ref的作用是定义一个响应式数据,返回的是一个ref的对象，如果想对对象
    // 进行操作，需要使用Ref对象调用vslue属性的方式进行数据操作
    // html模板中是不需要.value
    //一般用来定义一个基本类型的响应式数据
    const count = ref(0)
    console.log(count);
    
    function updateCount(){
      // count++
      count.value++
      
    }
    // 返回的是一个一个对象
    return{
      //属性
      count,
      updateCount
    }
  }
});

</script>
<style>
</style>
